<template>
  <div>
    <h3>vue3 语法</h3>
    <p class="b" :class="{active:isActive}">全称：{{firstName}}-{{fullName}}</p>
    <sun />
  </div>
</template>

<script lang="ts" setup>
import sun from './sun.vue'
import {ref,computed,watchEffect,watch,nextTick,provide} from 'vue'
provide('msf','helloworld')
const firstName=ref('Jack')
const lastName=ref('Doe')
const isActive=ref(true)
const fullName =computed(()=>{
    return firstName.value+lastName.value
})
const info=ref({name:'Jack'})
console.log('info',info,info.value,lastName,lastName.value)
watch(firstName,(cur,pre)=>{
  console.log('----',cur,pre)
})
watchEffect(()=>{
  console.log('jhgfd',firstName)
  if(firstName.value=='小强'){
    console.log('zsdsdsd')
  }
})
// watchEffect 立即执行，只能拿到更改后的值，不需要传递参数
firstName.value="小强1"
firstName.value="小强"
firstName.value="小狗"
nextTick(()=>{
  console.log('执行了')
})
</script>
<style>
.active{
    color:red;
}
.b{
    font-weight: 600;
}
</style>